<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto Slider</title>
    <script src="object.js"></script>
    <script src="objectIO.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <style>
        input[type=range] {
            background-color: transparent;
            -webkit-appearance: none;

        }

        input[type=range]::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            height: 68px; /* Must add six because this width includes the border */
            background-color: rgba(255, 255, 255, 0);
            -webkit-backdrop-filter: blur(4px);
            border: solid 4px #00edff;
            border-radius: 8px;
            padding: 5px;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            border: none;
            height: 50px;
            width: 50px;
            border-radius: 2px;
            background: #00edff;
        }

        .range-slider input[type="range"]:after {
            height: 2px;
            background: #fff;
            content: ' ';
            width: 5px;
            top: 50%;
            margin-top: -1px;
            left: -5px;
            z-index: 1;
            position: absolute;
        }

        input[type=range]:focus {
            outline: none;
        }
    </style>
</head>
<body>
<center>
<h1>Auto Monitor Demo</h1>
<input id="slider" type="range" value="0" min="0" max="255" style="width:250px">
<h1>PPkPub.org</h1>
</center>
<script type="text/javascript">
    var obj = new HybridObject();
    var slider = document.getElementById('slider');
    var sliderValue = 0, sliderPrevValue = 0, touchState = false;

    document.addEventListener("touchstart", function (e) {
        touchState = true;
    }, false);
    document.addEventListener("touchend", function (e) {
        touchState = false;
    }, false);

    obj.object.on("object", function (msg) {
        var data = JSON.parse(msg)
        if (obj.read("led", data)) {
            slider.value = obj.read("led", data) * 255;
        }
    });
    
    jQuery(document).ready(function(){
        setInterval(function () {
            //chh test
            /*
            sliderValue = slider.value;
            if (sliderPrevValue != sliderValue){
                console.log(sliderPrevValue+"->"+sliderValue);
                obj.write("led", sliderValue / 255);
                sliderPrevValue = sliderValue;
            }*/
            
            $.ajax({
                url: 'http://192.168.43.29:3001/?type=jsonp&ppk-uri=ppk%3A1%2Fap2%2Fsensor_b%23', //此处可以完善从区块链上获取访问参数
                async:false,
                type: "get",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback:"callback2",
                success: function(data) {
                    //data是亮度值1或0。
                    //此处可以完善对收到的数据块结合区块链上的标识配置信息来进行合法可信验证
                    console.log('data:'+data);
                    slider.value=data*255;

                    console.log('sliderValue:'+slider.value);
                    sliderValue = slider.value;
                    
                    if (!touchState) {
                        obj.readRequest("led");
                    } else {
                        if (sliderPrevValue != sliderValue)
                            obj.write("led", sliderValue / 255);

                        sliderPrevValue = sliderValue;
                    }
                },
                error: function() {
                    console.log('网络异常，请稍后再试试');
                }
            });
            
            
        }, 500);
     });

    
    //in_pos = 'led';
    //in_obj = "sliderlC9gss06tsaq";
    var in_pos = getQueryStringOnlyAscii("pos");
    var in_obj = getQueryStringOnlyAscii("obj");
    console.log("Object info from URL: "+in_obj+","+in_pos);
    postMessage('{"pos":"'+in_pos+'","obj":"'+in_obj+'"}','/');

    //获取URL中的指定传入参数（只能是标准ascii字符）
    function getQueryStringOnlyAscii(name) 
    { 
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r!=null && r[2].length>0) return unescape(r[2]); return ''; 
    }  

</script>
</body>
</html>